<template>
  <div class="baselink">
      <h3>{{childData.conName}}(类型：{{childData.conType}})</h3>
       <el-tabs v-model="activeName" @tab-click="tapHandel">
    <el-tab-pane label="基本信息" name="first" class="forms">
        <router-view v-if="isRouteView"></router-view>
          <!-- <mysql v-if="dataType=='mysql'" :childname="childData" @childevent="parentChange"></mysql>
          <excel v-if="dataType=='excel'" :childname="childData" @childevent="parentChange"></excel>
          <oracle v-if="dataType=='oracle'" :childname="childData" @childevent="parentChange"></oracle>
          <csv v-if="dataType=='csv'" :childname="childData" @childevent="parentChange"></csv>
          <txt v-if="dataType=='txt'" :childname="childData" @childevent="parentChange"></txt>
          <hive v-if="dataType=='hive'" :childname="childData" @childevent="parentChange"></hive> -->
        </el-tab-pane>
        <el-tab-pane label="表信息" name="second"  >
          <div  v-if="childData.conType=='hive'|| childData.conType=='oracle'">
              <div class="surface">
            <el-select v-model="dbname" @change="selectSurface(dbname)" v-if="dataType=='hive'||dataType=='oracle'||dataType=='mysql'" placeholder="请选择数据库">
              <el-option
                v-for="item in dbdatalist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-checkbox v-model="checked">只显示抽取的表</el-checkbox>
             <el-input class="searchsur"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              v-model="surface">
            </el-input>
          </div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="表名"
              width="230">
              <template slot-scope="scope">
                <a @click="watchSurface(scope.row.name)" class="surfaceA" href="javascript:;">{{scope.row.name}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="isSxtract"
              label="是否抽取"
              width="180">
              <template slot-scope="scope">
                <div v-if='scope.row.isSxtract=="0"'>
                  是
                </div>
                <div v-if='scope.row.isSxtract=="1"'>
                  否
                </div>
              </template>
            </el-table-column>
                 <el-table-column
                  prop="state"
                  label="是否分区"
                  width="180">
                  </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row,dataType)" type="text" size="small">抽取设置</el-button>
                
              </template>
            </el-table-column>
           
          </el-table>
          </div>
          <div v-if="childData.conType=='mysql'">
                      <div class="surface">
            <el-select v-model="dbname" @change="selectSurface(dbname)" v-if="dataType=='hive'||dataType=='oracle'||dataType=='mysql'" placeholder="请选择数据库">
              <el-option
                v-for="item in dbdatalist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-checkbox v-model="checked">只显示抽取的表</el-checkbox>
             <el-input class="searchsur"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              v-model="surface">
            </el-input>
          </div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="表名"
              width="230">
              <template slot-scope="scope">
                <a @click="watchSurface(scope.row.name)" class="surfaceA" href="javascript:;">{{scope.row.name}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="isSxtract"
              label="是否抽取"
              width="180">
              <template slot-scope="scope">
                <div v-if='scope.row.isSxtract=="0"'>
                  是
                </div>
                <div v-if='scope.row.isSxtract=="1"'>
                  否
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row,dataType)" type="text" size="small">抽取设置</el-button>
                
              </template>
            </el-table-column>
           
          </el-table>
          </div>
          <div  v-if="childData.conType=='excel'||childData.conType=='csv'||childData.conType=='txt'">
                      <div class="surface">
            <el-select v-model="dbname" @change="selectSurface(dbname)" v-if="dataType=='hive'||dataType=='oracle'||dataType=='mysql'" placeholder="请选择数据库">
              <el-option
                v-for="item in dbdatalist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-checkbox v-model="checked">只显示抽取的表</el-checkbox>
             <el-input class="searchsur"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              v-model="surface">
            </el-input>
          </div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="表名"
              width="230">
              <template slot-scope="scope">
                <a @click="watchSurface(scope.row.name)" class="surfaceA" href="javascript:;">{{scope.row.name}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="isSxtract"
              label="是否抽取"
              width="180">
              <template slot-scope="scope">
                <div v-if='scope.row.isSxtract=="0"'>
                  是
                </div>
                <div v-if='scope.row.isSxtract=="1"'>
                  否
                </div>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="相关内容" name="third" >
          <div class="surface">
            
             <el-input class="searchsur"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              v-model="surface">
            </el-input>
          </div>
            <el-table
            :data="tableRea"
            style="width: 100%">
            <el-table-column
              prop="tagTable"
              label="数据源表"
              width="200">
              <template slot-scope="scope">
                <a class="surfaceA" href="javascript:;">{{scope.row.tagTable}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="srcTable"
              label="数据目标表"
              width="200">
             
            </el-table-column>
            <el-table-column
              prop="jobName"
              label="任务名"
              width="150">
             
            </el-table-column>
            <el-table-column
              prop="account"
              label="创建者"
              width="180">
              
            </el-table-column>
            <el-table-column
              prop="createTm"
              label="创建时间"
              >
              <template slot-scope="scope">{{ scope.row.createTm | formatDate  }}</template>
            </el-table-column>
          </el-table>
          <el-pagination class="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-tab-pane>
        <!-- <el-tab-pane label="操作记录" name="fourth">
          <div class="surface">
            
             <el-input class="searchsur"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              v-model="surface">
            </el-input>
          </div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="操作时间"
              width="230">
              
            </el-table-column>
            <el-table-column
              prop="isSxtract"
              label="操作者"
              width="180">
              
            </el-table-column>
            <el-table-column
              prop="isSxtract"
              label="账号"
              width="180">
              
            </el-table-column>
            <el-table-column
              prop="state"
              label="操作类型"
              width="180">
            </el-table-column>
          </el-table>
           <el-pagination class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
        </el-tab-pane> -->
      </el-tabs>
      <el-dialog :title="surfacename" :visible.sync="dialogSur">
      <el-table :data="tableList2" border>
      <template v-for="(col,index) in cols">
        <el-table-column  :prop="col.prop" :show-overflow-tooltip=true :label="col.label" :key="index" >
        </el-table-column>
      </template>
      
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getMysql,getMysqltable,getMysqlsutable,getMysqlsetting,getrelData} from "@/api/datalink"
import mysql from "../components/MySQL"
import excel from "../components/Excel"
import oracle from "../components/Oracle"
import csv from "../components/Csv"
import txt from "../components/Txt"
import hive from "../components/MapRHive"
import {formatDate} from '@/utils/dateFomart'
export default {
  name: 'App',
  components:{
    mysql,
    excel,
    oracle,
    csv,
    txt,
    hive
  },
   data () {
    return {
       activeName:"first",
       sqltype:"",
       sqlId:"",
       checked:false,
       isRouteView:true,
      surface:"",
      surfacename:"",
      dbname:"",
      page:{
        pageSize:10,
        pageNum:1
      },
      total:0,
      childd:{},
      dbdatalist:[
        {
          value: '选项4',
          label: '表A'
        }, {
          value: '选项5',
          label: '表A'
        }
      ],
      dataType:"excel",
      dialogSur:false,
      childData:{},
      isConenct:false,
      currentPage:0,
      title:'',
        tableData: [{
            isSxtract: 0,
            name: '表A',
            state: '是'
          }, {
            isSxtract: 1,
            name: '表B',
            state: '是'
          }, {
            isSxtract: 0,
            name: '表C',
            state: '是'
          }, {
            isSxtract: 1,
            name: '表D',
            state: '否'
          }],
          tableRea:[
            {
              connId: 1,
              createTm: 1534989768000,
              tagTable: "user_tmp_001",
              groupId: 1,
              id: 1,
              jobCron: "0 30 0 * * ?",
              jobGroup: "sta",
              jobName: "sta_001",
              srcTable: "user",
              userId: '001'
            }, {
              connId: 1,
              createTm: 1534995991000,
              goalTableName: "job_tmp_001",
              groupId: 1,
              id: 2,
              jobCron: "0 30 0 * * ?",
              jobGroup: "sta",
              jobName: "sta_002",
              sourceTableName: "job",
              userId: '001'
            }, {
              connId: 1,
              createTm: 1534995991000,
              goalTableName: "model_tmp_002",
              groupId: 1,
              id: 2,
              jobCron: "0 30 0 * * ?",
              jobGroup: "sta",
              jobName: "sta_003",
              sourceTableName: "model",
              userId: '002'

            }, {
              connId: 1,
              createTm: 1534989768000,
              goalTableName: "partition_tmp_002",
              groupId: 1,
              id: 1,
              jobCron: "0 30 0 * * ?",
              jobGroup: "sta",
              jobName: "sta_004",
              sourceTableName: "partition",
              userId: '002'
            }, {
              connId: 1,
              createTm: 1534995991000,
              goalTableName: "topic_tmp_003",
              groupId: 1,
              id: 2,
              jobCron: "0 30 0 * * ?",
              jobGroup: "sta",
              jobName: "sta_005",
              sourceTableName: "topic",
              userId: '003'
            }, {
              connId: 1,
              createTm: 1534995991000,
              goalTableName: "filed_tmp_003",
              groupId: 1,
              id: 2,
              jobCron: "0 30 0 * * ?",
              jobGroup: "sta",
              jobName: "sta_006",
              sourceTableName: "filed",
              userId: '003'
            }
          ],
        cols:[
        {
          label:"编号",
          prop:"node",
          type:"normal",

        },
        {
          label:"名称",
          prop:"name",
          type:"normal",
          
        },
        {
          label:"类型",
          prop:"type",
          type:"normal",
          
        },
        {
          label:"坐标",
          prop:"coorid",
          type:"normal",
          
        }
      ],
       tableList2:[
        {
          node:"55",
          name:"99",
          type:"qq",
          coorid:"rr"
        },
        {
          node:"66",
          name:"uu",
          type:"ub",
          coorid:"rr"
        }
      ]
    }
  },
   filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        },
    },
    mounted:function(){
      
     if(this.$store.state.tabinfo.tabindex=="1"){
        this.activeName="second";
      }else if(this.$store.state.tabinfo.tabindex=="0"){
        this.activeName="first";
      }
      this.initdata();
      this.getMysqlData();
      this.getReldata(this.page)
    },
    watch: {
            // 如果路由有变化，会再次执行该方法
             "$route": "routeLoad",
          //   childData:function(curVal,oldVal){
          //     this.childData=curVal
          // }, 
        },
    methods:{
      initdata(){
        this.dbname=this.dbdatalist[0].label
        this.childData=this.$store.state.formType;
        this.formType=this.$route.query.sqlType;
        this.dataType=this.$route.query.sqlType
      },
      tapHandel(tab, event){
          console.log(tab, event);
          if(tab.index==1){
            console.log(55)
          }
      },
      handleSizeChange(val) {
        this.page.pageSize=val;
        this.getReldata(this.page)
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page.pageNum=val;
         this.getReldata(this.page)
        console.log(`当前页: ${val}`);
      },
      parentChange(e){
        console.log(e)
        if(e.isSuccess===true){
          this.isConenct=true;
          this.activeName="second";
        }else{
          this.childData.conName=e;
        }
        
        
      },
      handleClick(row,type){
          console.log(row,type);
          if(type=="mysql"){
            this.$router.push({name:"MysqlDecSetting",query:{row:row,sqlId:this.$store.state.formType.id,dbname:this.dbname,activenavIndex:'1'}})
          }else{
            this.$router.push({name:"DecSetting",query:{row:row,sqlId:this.$store.state.formType.id,dbname:this.dbname,activenavIndex:'1'}})
          }
          
      },
      routeLoad(){
            this.isConenct=false;
            this.isRouteView=false;
            this.$nextTick(()=>{
              this.isRouteView=true;
              this.initdata();
              this.getMysqlData();
              this.getReldata(this.page)
            })
            this.sqlId=this.$route.query.sqlId
          if(this.$store.state.tabinfo.tabindex=="1"){
            this.activeName="second";
          }else if(this.$store.state.tabinfo.tabindex=="0"){
            this.activeName="first";
          }
          // this.getMysqlData();
          this.childData=this.$store.state.formType;
          console.log(this.childData)
      },
        //根据表名查询该表详细信息
        watchSurface(name){
            console.log(name)
            
            getMysqlsutable(this.$route.query.sqlId,this.dbname,name).then(res=>{
              if(res.data.errorNo=="0"){
                let colsarr=[];
                let colslist=res.data.results.colList;
                console.log(colslist)
                for(var i=0;i<colslist.length;i++){
                  colsarr.push({ label:colslist[i],
                    prop:colslist[i]})
                }
                this.cols=colsarr;
                this.tableList2=res.data.results.valueList;
                this.surfacename=name;
                this.dialogSur=true;
              }
            })
            
        },
        getMysqlData(){
          getMysql(this.$route.query.sqlId).then(res=>{
            console.log(res.data);
            if(res.data.errorNo=='0'){
              let arr=[];
              let options=res.data.databases;
              console.log(options)
              for(var i=0;i<options.length;i++){
                arr.push({label:options[i],value:options[i]})
              }
               this.dbdatalist=arr;
               let table=[]
                let tablelist=res.data.tables;
                this.dbname=options[0];
              for(var i=0;i<tablelist.length;i++){
                table.push({
                  isSxtract: 0,
                  name: tablelist[i],
                  state: '是'})
              }
              this.tableData=table;
            }
           
          })
        },
        //根据数据源名称获取表
        selectSurface(name){
          getMysqltable(this.$route.query.sqlId,name).then(res=>{
            if(res.data.errorNo=="0"){
              let table=[]
              let tablelist=res.data.results;
              for(var i=0;i<tablelist.length;i++){
                table.push({
                  isSxtract: 0,
                  name: tablelist[i],
                  state: '--'})
              }
              this.tableData=table;
            }
          })
        },
        //根据连接获取相关信息；
        getReldata(){
          getrelData(this.page).then(res=>{
            console.log(res);
            if(res.data.errorNo=="0"){
              this.tableRea=res.data.results.list;
              this.total=res.data.results.totals
            }
          })
        }
    }
}
</script>

<style scoped>
a{
    text-decoration: none;
}
.searchsur{
  width: 150px;
  float: right;
}
.surface{
    height: 40px;
    line-height: 40px;
}
.surfaceA{
  display: inline-block;
  color: blue;
}
.page{
    text-align: center
}
</style>